<template>
    <div >
        <div class="toast" v-if="isShow">
            <van-icon name="replay" class="rotate"/>  {{message}}
        </div>
    </div>
</template>
<script>
export default {
    name:"Toast",
    data(){
        return{
            message:"",
            isShow:false
        }
    },
    methods:{
        show(msg,duration){
            this.isShow = true
            this.message = msg
            setTimeout(()=>{
                this.isShow = false
                this.message = ''
            },duration)
        }
    }
    
}
</script>

<style lang="scss" scoped>
.toast{
    padding:0 13px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 6px;
    background: rgba(0,0,0,.6);
    font-size: 18px;
    color: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 10000;
}

.rotate{
    font-size: 22px;
    animation: rotate .9s ease infinite;
}

@keyframes rotate {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
</style>